JSON形式のデータをjQueryを使って取得する

jQureyを使ってJSON形式のデータを取得してUIを生成する方法をご紹介したいと思います。

JavaScriptソース

$(function(){
	$.ajax({
	   type: "GET",
	   url: "category/list",
	   dataType:"json",
	   //データの取得後、htmlを生成
	   success: function(data){
		 $.each(data, function(i ,items){
			$( " #category " ).append("<p><a>" + data[ i ].itemcategoryNm +  "</a></p>")
			.find("a").eq(i).attr({href: "searchResult.html"})
			})				 
	   }
	 });
})

getJSONメソッドだとうまくいかなかったのでajaxメソッドを使用しています。

↓ちなみにChromeでurlを指定するとJSONデータを表示することができます。

Top.html（通信Before）

<div id="category>
</div>

※閉じタグをお忘れなく。

↓

Top.html（通信After）

<div id="category">
<p><a href="searchResult.html">お笑い</a></p>
<p><a href="searchResult.html">アクション</a></p>
<p><a href="searchResult.html">ロマンス</a></p>
<p><a href="searchResult.html">時代劇</a></p>
<p><a href="searchResult.html">ドラマ</a></p>
<p><a href="searchResult.html">アイドル</a></p>
<p><a href="searchResult.html">音楽</a></p>
</div>

HTMLの生成部分に関してはjQuery日本語リファレンスをいつも参考にさせていただいています。